<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>弹出提示框 &middot; Bootstrap</title>
<!-- Bootstrap 核心CSS -->
<link href="../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../assets/css/docsearch.min.css" rel="stylesheet">
<link href="../assets/css/docs.min.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link rel="apple-touch-icon" href="../assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="../assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="../assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
  
<link rel="mask-icon" href="../assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="../favicon.ico">
<meta name="msapplication-config" content="../assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

<!-- Twitter -->
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Introduction">
<meta name="twitter:description" content="提示框 Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
<meta name="twitter:image" content="../assets/brand/bootstrap-social.png">

<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/introduction/">
<meta property="og:title" content="Introduction">
<meta property="og:description" content="提示框 Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
<meta property="og:type" content="website">
<meta property="og:image" content="../assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="../assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<script>
  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
  ga('create', 'UA-146052-10', 'getbootstrap.com');
  ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container">
<span class="skiplink-text">跳到主体内容</span>
</div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../index.html" aria-label="Bootstrap">
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
<title>Bootstrap</title>
<path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
<path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
</svg>
</a>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
<li class="nav-item"><a class="nav-link " href="../index.html">首页</a></li>
<li class="nav-item"><a class="nav-link active" href="../docs/index.html">中文手册</a></li>
<li class="nav-item"><a class="nav-link " href="../examples/index.html">实例</a></li>
<li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" id="bd-versions" aria-expanded="false" aria-haspopup="true" href="#" data-toggle="dropdown"> 主题模板 </a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
<a class="dropdown-item" href="../themes/index.html" target="_blank">主题门户</a> <a class="dropdown-item" href="../themes/live.html">精选模板</a>
</div>
</li>



</ul>
</div>
 
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="../components/download.html">下载 Bootstrap</a> </header>
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
<title>Menu</title>
<path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
</svg>
</button>
</form>
<nav class="collapse bd-links" id="bd-docs-nav">
<div class="bd-toc-item">
<a class="bd-toc-link" href="../docs/index.html"> 快速入门 </a>
<ul class="nav bd-sidenav">
<li><a href="../docs/index.html">关于</a></li>
<li><a href="../docs/download.html">下载</a></li>
<li><a href="../docs/contents.html">目录结构</a></li>
<li><a href="../docs/browsers-devices.html">浏览器与设备调优</a></li>
<li><a href="../docs/javascript.html">JavaScript脚本</a></li>
<li><a href="../docs/theming.html">主题化</a></li>
<li><a href="../docs/build-tools.html">编译工具</a></li>
<li><a href="../docs/webpack.html"> Webpack模块化</a></li>
<li><a href="../docs/accessibility.html">无障碍浏览</a></li>
</ul>
</div>
<div class="bd-toc-item">
<a class="bd-toc-link" href="../layout/overview.html"> 布局 </a>
<ul class="nav bd-sidenav">
<li><a href="../layout/overview.html">概述</a></li>
<li><a href="../layout/grid.html">栅格</a></li>
<li><a href="../layout/utilities-for-layout.html"> 布局实施建议 </a> </li>
</ul>
</div>
<div class="bd-toc-item">
<a class="bd-toc-link" href="../content/reboot.html">内容 </a>
<ul class="nav bd-sidenav">
<li><a href="../content/reboot.html"> 初始化与CSS重置 </a> </li>
<li><a href="../content/typography.html"> 排版 </a> </li>
<li><a href="../content/code.html"> 代码 </a> </li>
<li><a href="../content/images.html"> 图片 </a> </li>
<li><a href="../content/tables.html"> 表格 </a> </li>
<li><a href="../content/figures.html"> 图文框 </a> </li>
</ul>
</div>
<div class="bd-toc-item active">
<a class="bd-toc-link" href="alerts.html"> 组件 </a>
<ul class="nav bd-sidenav">
 <li><a href="alerts.html"> 警告提示框(Alerts) </a> </li>
    <li><a href="badge.html"> 徽章(Badge) </a> </li>
    <li><a href="breadcrumb.html"> 面包屑导航(Breadcrumb) </a> </li>
    <li><a href="buttons.html"> 按钮(Button) </a> </li>
    <li><a href="button-group.html"> 按钮组(Button-group) </a> </li>
    <li><a href="card.html"> 卡片(Card) </a> </li>
    <li><a href="carousel.html">  轮播效果(Carousell) </a> </li>
    <li><a href="collapse.html"> 折叠面板(Collapse) </a> </li>
    <li><a href="dropdowns.html"> 下拉菜单(Dropdown) </a> </li>
    <li><a href="forms.html"> 表单(Form) </a> </li>
    <li><a href="input-group.html"> 输入框(Input-group) </a> </li>
    <li><a href="jumbotron.html"> Hero大块屏(Jumbotron) </a> </li>
    <li><a href="list-group.html"> 列表组(List-group) </a> </li>
    <li><a href="media-object.html"> 媒体对象/图文混排(Media-object) </a> </li>
    <li><a href="modal.html"> 弹出模态框(Modal) </a> </li>
    <li><a href="navs.html"> 导航/滑动门(Navs) </a> </li>
    <li><a href="navbar.html"> 导航栏(Navbar) </a> </li>
    <li><a href="pagination.html"> 分页(Pagination) </a> </li>
    <li><a href="popovers.html"> POP提示(Popover) </a> </li>
    <li><a href="progress.html"> 进度条(Progress) </a> </li>
    <li><a href="scrollspy.html"> 滚动监听(Scrollspy) </a> </li>
    <li><a href="spinners.html"> 旋转特效(Spinners) </a> </li>
    <li class="active bd-sidenav-active"><a href="toasts.html"> 弹出提示框(Toasts) </a> </li>
    <li><a href="tooltips.html"> 提示冒泡(Tooltip) </a> </li>
</ul>
</div>
<div class="bd-toc-item">
<a class="bd-toc-link" href="../utilities/borders.html"> 公共样式 </a>
<ul class="nav bd-sidenav">
<li><a href="../utilities/borders.html"> 边框(border) </a> </li>
<li><a href="../utilities/clearfix.html"> 清动浮动(clearfix) </a> </li>
<li><a href="../utilities/close-icon.html"> 关闭图标(close icon) </a> </li>
<li><a href="../utilities/colors.html"> 颜色(color) </a> </li>
<li><a href="../utilities/display.html"> Display显示属性 </a> </li>
<li><a href="../utilities/embed.html"> 嵌入(embed) </a> </li>
<li><a href="../utilities/flex.html"> Flex弹性布局 </a> </li>
<li><a href="../utilities/float.html"> Float浮动属性 </a> </li>
<li><a href="../utilities/image-replacement.html"> 图像替换 </a> </li>
<li><a href="../utilities/overflow.html"> 溢出 </a> </li>
<li><a href="../utilities/position.html"> Position固顶(底)及定位 </a> </li>
<li><a href="../utilities/screenreaders.html"> 读屏器 (Screenreaders)</a></li>
<li><a href="../utilities/shadows.html"> 阴影(shadows)</a></li>
<li><a href="../utilities/sizing.html"> 规格(sizi)</a></li>
<li><a href="../utilities/spacing.html"> 间隔(spacing) </a> </li>
<li><a href="../utilities/text.html"> 文本处理 </a> </li>
<li><a href="../utilities/vertical-align.html"> 垂直对齐(vertical align) </a> </li>
<li><a href="../utilities/visibility.html"> Visibility显示或隐藏(能见度)处理 </a> </li>
</ul>
</div>
<div class="bd-toc-item">
<a class="bd-toc-link" href="../extend/approach.html"> 延伸 </a>
<ul class="nav bd-sidenav">
<li> <a href="../extend/approach.html"> 方法论 </a> </li>
<li><a href="../extend/icons.html"> 图标 </a> </li>
</ul>
</div>
<div class="bd-toc-item">
<a class="bd-toc-link" href="../migration/index.html"> 迁移 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item">
<a class="bd-toc-link" href="../about/history.html"> 关于 </a>
<ul class="nav bd-sidenav">
<li> <a href="../about/history.html"> 成长历史 </a> </li>
<li> <a href="../about/team.html"> 项目团队 </a> </li>
<li> <a href="../about/brand.html"> 品牌标志 </a> </li>
<li> <a href="../about/license.html"> 许可授权 </a> </li>
<li> <a href="../about/translations.html"> 翻译 </a> </li>
</ul>
</div>
</nav>
</div>
<div class="d-none d-xl-block col-xl-2 bd-toc">

<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">综述</a></li>
<li class="toc-entry toc-h2"><a href="#examples">示例</a>
<ul>
<li class="toc-entry toc-h3"><a href="#basic">基础</a></li>
<li class="toc-entry toc-h3"><a href="#translucent">透明</a></li>
<li class="toc-entry toc-h3"><a href="#stacking">堆叠</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#placement">位置</a></li>
<li class="toc-entry toc-h2"><a href="#accessibility">无障碍</a></li>
<li class="toc-entry toc-h2"><a href="#javascript-behavior">JavaScript行为</a>
<ul>
<li class="toc-entry toc-h3"><a href="#usage">用法</a></li>
<li class="toc-entry toc-h3"><a href="#options">选项</a></li>
<li class="toc-entry toc-h3"><a href="#methods">方法</a>
<ul>
<li class="toc-entry toc-h4"><a href="#toastoptions">$().toast(options)</a></li>
<li class="toc-entry toc-h4"><a href="#toastshow">.toast('show')</a></li>
<li class="toc-entry toc-h4"><a href="#toasthide">.toast('hide')</a></li>
<li class="toc-entry toc-h4"><a href="#toastdispose">.toast('dispose')</a></li>
</ul>
</li>
<li class="toc-entry toc-h3"><a href="#events">事件</a></li>
</ul>
</li>
</ul>
</div>
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">弹出提示框(Toast)</h1>
<p class="bd-lead"><code class="highlighter-rouge">.toast</code>弹出提示框控件用于向访客推送通知，是个轻量级、易于订制的警告消息组件。</p>
 
<p><code class="highlighter-rouge">.toast</code>是一种轻量级通知，旨在模仿移动和桌面操作系统普及的推送通知。它们是用弹性盒子构建的，所以很容易对齐和定位,这是在V4.2.1版本添加新特性。</p>
<h2 id="overview">综述</h2>
<p>使用toast插件时需知:</p>
<ul>
<li>如果你从源代码构建JavaScript, 需要<a href="../docs/javascript.html#util">requires <code class="highlighter-rouge">util.js</code></a>.</li>
<li>Toasts出于性能原因选择加入,因此 <strong>你必须自己初始化它们</strong>.</li>
<li>Toasts如果没有指定，将会自动隐藏 <code class="highlighter-rouge">autohide: false</code>.</li>
</ul>
<h2 id="examples">示例</h2>
<h3 id="basic">基础</h3>
<p>为了鼓励可扩展和可预测的Toast，我们建议使用标题和正文类型的。Toast标题使用 <code class="highlighter-rouge">display: flex</code>, 随着我们的边距和弹性盒子设置使内容容易对齐。</p>
<p>Toasts可按需要引用、定义、设置，所需的标记非常少--只需要一个单独的元素来包含你的提示内容，并强烈建议使用一个强制按钮。</p>
<div class="bg-light">

<div class="bd-example">
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect fill="#007aff" width="100%" height="100%"></rect></svg>
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">×</span>
    </button>
  </div>
  <div class="toast-body">
    您好! 这是一个Toasts弹出提示框.
  </div>
</div>
</div>
<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-header"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded mr-2"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
    <span class="nt">&lt;strong</span> <span class="na">class=</span><span class="s">"mr-auto"</span><span class="nt">&gt;</span>Bootstrap<span class="nt">&lt;/strong&gt;</span>
    <span class="nt">&lt;small&gt;</span>11 mins ago<span class="nt">&lt;/small&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"ml-2 mb-1 close"</span> <span class="na">data-dismiss=</span><span class="s">"toast"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-body"</span><span class="nt">&gt;</span>
    Hello, world! This is a toast message.
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>

</div>
<h3 id="translucent">透明</h3>
<p>Toasts也是半透明的，所以它们可以在任何可能出现的地方混合。对于浏览器支持<code class="highlighter-rouge">backdrop-filter</code> CSS 性能,我们还将尝试模糊的元素在提示框下。</p>
<div class="bg-dark">
<div class="bd-example">
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
<rect fill="#007aff" width="100%" height="100%" />
</svg>
<strong class="mr-auto">Bootstrap</strong> <small class="text-muted">11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
</div>
<div class="toast-body">
 您好! 这是一个Toasts弹出提示框.
</div>
</div>
</div>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-header"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded mr-2"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
    <span class="nt">&lt;strong</span> <span class="na">class=</span><span class="s">"mr-auto"</span><span class="nt">&gt;</span>Bootstrap<span class="nt">&lt;/strong&gt;</span>
    <span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>11 mins ago<span class="nt">&lt;/small&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"ml-2 mb-1 close"</span> <span class="na">data-dismiss=</span><span class="s">"toast"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-body"</span><span class="nt">&gt;</span>
     您好! 这是一个Toasts弹出提示框.
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</figure>
</div>
<h3 id="stacking"> 堆叠</h3>
<p>当我们有多个提示框时, 我们默认以一种可读的方式从上往下堆叠它们。</p>
<div class="bg-light">
<div class="bd-example">
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
<rect fill="#007aff" width="100%" height="100%" />
</svg>
<strong class="mr-auto">Bootstrap</strong> <small class="text-muted">just now</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
</div>
<div class="toast-body">
看到了吗?就像这样。
</div>
</div>
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
<rect fill="#007aff" width="100%" height="100%" />
</svg>
<strong class="mr-auto">Bootstrap</strong> <small class="text-muted">2 seconds ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
</div>
<div class="toast-body">
注意，提示弹出框会自动堆积。
</div>
</div>
</div>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-header"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded mr-2"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
    <span class="nt">&lt;strong</span> <span class="na">class=</span><span class="s">"mr-auto"</span><span class="nt">&gt;</span>Bootstrap<span class="nt">&lt;/strong&gt;</span>
    <span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>just now<span class="nt">&lt;/small&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"ml-2 mb-1 close"</span> <span class="na">data-dismiss=</span><span class="s">"toast"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-body"</span><span class="nt">&gt;</span>
   看到了吗?就像这样。
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-header"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded mr-2"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
    <span class="nt">&lt;strong</span> <span class="na">class=</span><span class="s">"mr-auto"</span><span class="nt">&gt;</span>Bootstrap<span class="nt">&lt;/strong&gt;</span>
    <span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>2 seconds ago<span class="nt">&lt;/small&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"ml-2 mb-1 close"</span> <span class="na">data-dismiss=</span><span class="s">"toast"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-body"</span><span class="nt">&gt;</span>
    Heads up, toasts will stack automatically
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</figure>
</div>
<h2 id="placement">位置</h2>
<p>当你需要提示框是可以用传统的CSS放置它们。右上角通常用于通知,如下图。如果你一次只展示一个提示框，请将定位样式正确地放在你想要的位置用<code class="highlighter-rouge">.toast</code>.</p>
<div class="bg-dark">
<div class="bd-example">
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
<div class="toast fade show" style="position: absolute; top: 0; right: 0;">
<div class="toast-header">
<svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
<rect fill="#007aff" width="100%" height="100%" />
</svg>
<strong class="mr-auto">Bootstrap</strong> <small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
</div>
<div class="toast-body">
 您好! 这是一个Toasts弹出提示框.
</div>
</div>
</div>
</div>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">aria-live=</span><span class="s">"polite"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span> <span class="na">style=</span><span class="s">"position: relative; min-height: 200px;"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast"</span> <span class="na">style=</span><span class="s">"position: absolute; top: 0; right: 0;"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-header"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded mr-2"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
      <span class="nt">&lt;strong</span> <span class="na">class=</span><span class="s">"mr-auto"</span><span class="nt">&gt;</span>Bootstrap<span class="nt">&lt;/strong&gt;</span>
      <span class="nt">&lt;small&gt;</span>11 mins ago<span class="nt">&lt;/small&gt;</span>
      <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"ml-2 mb-1 close"</span> <span class="na">data-dismiss=</span><span class="s">"toast"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/span&gt;</span>
      <span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-body"</span><span class="nt">&gt;</span>
      Hello, world! This is a toast message.
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</figure>
</div>
<p>对于生成更多通知的系统，可以考虑使用包装元素，这样它们可以轻松地进行堆栈。</p>
<div class="bg-dark">
<div class="bd-example">
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
<!-- Position it -->
<div style="position: absolute; top: 0; right: 0;">

<!-- Then put toasts within -->
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
<rect fill="#007aff" width="100%" height="100%" />
</svg>
<strong class="mr-auto">Bootstrap</strong> <small class="text-muted">just now</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
</div>
<div class="toast-body">
看到了吗?就像这样。
</div>
</div>
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
<rect fill="#007aff" width="100%" height="100%" />
</svg>
<strong class="mr-auto">Bootstrap</strong> <small class="text-muted">2 seconds ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
</div>
<div class="toast-body">
注意，提示弹出框会自动堆积。
</div>
</div>
</div>
</div>
</div>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">aria-live=</span><span class="s">"polite"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span> <span class="na">style=</span><span class="s">"position: relative; min-height: 200px;"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Position it --&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"position: absolute; top: 0; right: 0;"</span><span class="nt">&gt;</span>

    <span class="c">&lt;!-- Then put toasts within --&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-header"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded mr-2"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
        <span class="nt">&lt;strong</span> <span class="na">class=</span><span class="s">"mr-auto"</span><span class="nt">&gt;</span>Bootstrap<span class="nt">&lt;/strong&gt;</span>
        <span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>just now<span class="nt">&lt;/small&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"ml-2 mb-1 close"</span> <span class="na">data-dismiss=</span><span class="s">"toast"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/span&gt;</span>
        <span class="nt">&lt;/button&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-body"</span><span class="nt">&gt;</span>
   看到了吗?就像这样。
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>

    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-header"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded mr-2"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
        <span class="nt">&lt;strong</span> <span class="na">class=</span><span class="s">"mr-auto"</span><span class="nt">&gt;</span>Bootstrap<span class="nt">&lt;/strong&gt;</span>
        <span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>2 seconds ago<span class="nt">&lt;/small&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"ml-2 mb-1 close"</span> <span class="na">data-dismiss=</span><span class="s">"toast"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/span&gt;</span>
        <span class="nt">&lt;/button&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-body"</span><span class="nt">&gt;</span>
   注意，提示弹出框会自动堆积。
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</figure>
</div>
<p>你也可以用弹性布局定义提示框水平居中或者垂直居中。</p>
<div class="bg-dark">
<div class="bd-example">
<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">

<!-- Then put toasts within -->
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
<rect fill="#007aff" width="100%" height="100%" />
</svg>
<strong class="mr-auto">Bootstrap</strong> <small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
</div>
<div class="toast-body">
 您好! 这是一个Toasts弹出提示框.
</div>
</div>
</div>
</div>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Flexbox container for aligning the toasts --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">aria-live=</span><span class="s">"polite"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span> <span class="na">class=</span><span class="s">"d-flex justify-content-center align-items-center"</span> <span class="na">style=</span><span class="s">"min-height: 200px;"</span><span class="nt">&gt;</span>

  <span class="c">&lt;!-- Then put toasts within --&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-header"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded mr-2"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
      <span class="nt">&lt;strong</span> <span class="na">class=</span><span class="s">"mr-auto"</span><span class="nt">&gt;</span>Bootstrap<span class="nt">&lt;/strong&gt;</span>
      <span class="nt">&lt;small&gt;</span>11 mins ago<span class="nt">&lt;/small&gt;</span>
      <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"ml-2 mb-1 close"</span> <span class="na">data-dismiss=</span><span class="s">"toast"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/span&gt;</span>
      <span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-body"</span><span class="nt">&gt;</span>
      Hello, world! This is a toast message.
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</figure>
</div>
<h2 id="accessibility">无障碍</h2>
<p>Toasts旨在对您的访问者或用户造成小的干扰，因此为了帮助那些拥有屏幕阅读器和类似辅助技术的人，你应该将你的提示框包裹在<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions"><code class="highlighter-rouge">aria-live</code> region</a>。屏幕阅读器会自动宣布对活动区域的更改（例如注入/更新Toast组件），而无需移动用户的焦点或以其他方式中断用户。此外, 包括 <code class="highlighter-rouge">aria-atomic="true"</code> 确保整个提示框始终作为单个(原子)单元进行声明，而不是宣布更改了什么(如果只更新提示框的部分内容，或者在稍后的某个时间点显示相同的提示框内容，可能会导致问题)。如果需要的信息对流程很重要，例如表单中的错误列表，然后使用 <a href="alerts.html">alert组件</a>代替提示框。</p>
<p>请注意，在生成或更新提示框之前，活动区域需要出现在标记中。如果您同时动态地生成它们并将它们注入页面，辅助技术通常不会宣布它们。</p>
<p>你也需要适应 <code class="highlighter-rouge">role</code>和<code class="highlighter-rouge">aria-live</code> 级别取决于内容。如果是一个重要的消息，比如一个错误，用 <code class="highlighter-rouge">role="alert" aria-live="assertive"</code>, 也可以用<code class="highlighter-rouge">role="status" aria-live="polite"</code>属性。</p>
<p>当你显示的内容发生变化时，请确保更新<a href="#options"><code class="highlighter-rouge">延迟</code>超时</a>，以确保人们有足够的时间阅读提示框内容。</p>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"polite"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span> <span class="na">data-delay=</span><span class="s">"10000"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</figure>
<p>当使用<code class="highlighter-rouge">autohide: false</code>, 你必须加上一个关闭按钮允许用户关闭这个提示框。</p>
<div class="bg-light">
<div class="bd-example">
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast fade show" data-autohide="false">
<div class="toast-header">
<svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
<rect fill="#007aff" width="100%" height="100%" />
</svg>
<strong class="mr-auto">Bootstrap</strong> <small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
</div>
<div class="toast-body">
 您好! 这是一个Toasts弹出提示框.
</div>
</div>
</div>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span> <span class="na">class=</span><span class="s">"toast"</span> <span class="na">data-autohide=</span><span class="s">"false"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-header"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded mr-2"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
    <span class="nt">&lt;strong</span> <span class="na">class=</span><span class="s">"mr-auto"</span><span class="nt">&gt;</span>Bootstrap<span class="nt">&lt;/strong&gt;</span>
    <span class="nt">&lt;small&gt;</span>11 mins ago<span class="nt">&lt;/small&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"ml-2 mb-1 close"</span> <span class="na">data-dismiss=</span><span class="s">"toast"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-body"</span><span class="nt">&gt;</span>
    Hello, world! This is a toast message.
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</figure>
</div>
<h2 id="javascript-behavior">JavaScript 行为</h2>
<h3 id="usage">用法</h3>
<p>通过JavaScript初始化提示框:</p>
<figure class="highlight">
<pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.toast'</span><span class="p">).</span><span class="nx">toast</span><span class="p">(</span><span class="nx">option</span><span class="p">)</span></code></pre>
</figure>
<h3 id="options">选项</h3>
<p>选项可以通过数据属性或JavaScript传递。对于数据属性，请将选项名称附加到 <code class="highlighter-rouge">data-</code>, 如在 <code class="highlighter-rouge">data-animation=""</code>.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 100px;">Type</th>
<th style="width: 50px;">Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>animation</td>
<td>boolean</td>
<td>true</td>
<td>Apply a CSS fade transition to the toast</td>
</tr>
<tr>
<td>autohide</td>
<td>boolean</td>
<td>true</td>
<td>Auto hide the toast</td>
</tr>
<tr>
<td>delay</td>
<td>number</td>
<td><code>500</code></td>
<td>Delay hiding the toast (ms)</td>
</tr>
</tbody>
</table>
<h3 id="methods">方法</h3>
<div class="bd-callout bd-callout-danger">
<h4 id="asynchronous-methods-and-transitions">异步方法和转换</h4>
<p>所有API方法都是<strong>异步的</strong> 并且开始<strong>转换</strong>. 一旦转换开始，但 <strong>结束之前</strong>。总之，<strong>转换组件的方法调用将被忽略</strong>。</p>
<p><a href="../docs/javascript.html">有关更多信息，请参阅我们的JavaScript文档</a>。</p>
</div>
<h4 id="toastoptions"><code class="highlighter-rouge">$().toast(options)</code></h4>
<p>将toast处理附加到元素集合。</p>
<h4 id="toastshow"><code class="highlighter-rouge">.toast('show')</code></h4>
<p>揭示元素的提示框。 <strong>在实际显示提示框之前返回调用者</strong> (i.e. 之前 <code class="highlighter-rouge">shown.bs.toast</code>事件发生).
你必须手动调用此方法，代替你的提示框不会显示。</p>
<figure class="highlight">
<pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">toast</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span></code></pre>
</figure>
<h4 id="toasthide"><code class="highlighter-rouge">.toast('hide')</code></h4>
<p>隐藏元素的提示框。 <strong>在实际隐藏toast之前返回调用者</strong> (i.e. 之前 <code class="highlighter-rouge">hidden.bs.toast</code> 事件发生). 如果你做了，你必须手动调用此方法 <code class="highlighter-rouge">autohide</code>为<code class="highlighter-rouge">false</code>.</p>
<figure class="highlight">
<pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">toast</span><span class="p">(</span><span class="s1">'hide'</span><span class="p">)</span></code></pre>
</figure>
<h4 id="toastdispose"><code class="highlighter-rouge">.toast('dispose')</code></h4>
<p>隐藏元素的提示框。 你的提示框将保留在DOM上，但不再显示。</p>
<figure class="highlight">
<pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">toast</span><span class="p">(</span><span class="s1">'dispose'</span><span class="p">)</span></code></pre>
</figure>
<h3 id="events">事件</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>show.bs.toast</td>
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
</tr>
<tr>
<td>shown.bs.toast</td>
<td>This event is fired when the toast has been made visible to the user.</td>
</tr>
<tr>
<td>hide.bs.toast</td>
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
</tr>
<tr>
<td>hidden.bs.toast</td>
<td>This event is fired when the toast has finished being hidden from the user.</td>
</tr>
</tbody>
</table>
<figure class="highlight">
<pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myToast'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'hidden.bs.toast'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
  <span class="c1">// do something…</span>
<span class="p">})</span></code></pre>
</figure>
</main>
</div>
</div>
<script src="../js/jquery-3.2.1.slim.min.js"></script> 
<script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery-slim.min.js"><\/script>')</script> 
<script src="../dist/js/popper.min.js"></script> 
<script src="../dist/js/bootstrap.min.js"></script> 
<script src="../assets/js/docs.min.js"></script> 
<script src="../assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../assets/js/docsearch.min.js"></script> 
 

</body>
</html>
